<template>
  <div>
    <div>
      <el-form ref="query" :model="query" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="奖品名称">
              <el-input v-model="query.keywords" placeholder="请输入奖品名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="奖品分类">
              <el-cascader
                v-model="query.class_id"
                :options="queryOptioins"
                :props="{ checkStrictly: true,value:'id',label:'class_name' }"
                placeholder="请选择奖品分类"
                clearable
                :loading="queryLoading"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="价格区间">
              <el-input v-model="query.lowPrice" style="width:80px" placeholder="低"></el-input>-
              <el-input v-model="query.heightPrice" style="width:80px" placeholder="高"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" @click="queryAsk">筛选</el-button>
              <el-button @click="queryReset">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <el-table
      @sort-change="sortChange"
      ref="multipleTable"
      :header-cell-style="{background:'#eee'}"
      :data="boxRewardData"
      v-loading="loading"
      border
      style="width: 100%;margin-bottom: 20px;"
    >
      <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
      <el-table-column align="center" prop="id" label="ID" width="80"></el-table-column>
      <el-table-column align="center" label="奖品图片" width="80">
        <template slot-scope="scope">
          <el-popover placement="top-start" title trigger="hover">
            <img :src="scope.row.img" alt style="max-width:80px" />
            <el-avatar
              slot="reference"
              shape="square"
              :size="50"
              fit="scale-down"
              :src="scope.row.img"
            ></el-avatar>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="goods_name" label="奖品名称"></el-table-column>
      <el-table-column align="center" prop="class_name" label="分类" width="120"></el-table-column>
      <el-table-column align="center" prop="y_price" label="成本" width="120"></el-table-column>
      <el-table-column align="center" prop="price" label="价格" sortable="custom" width="120"></el-table-column>
      <el-table-column align="center" prop="address" label="预售/现货" width="120">
        <template slot-scope="scope">
          <div v-if="scope.row.type==1">预售</div>
          <div v-if="scope.row.type==2">现货</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="primary" @click="onSubmit(scope.row)">添加</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align:right">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="currentPage"
        :total="total"
        @current-change="currentChange"
      ></el-pagination>
    </div>

    <!-- <div style="margin-top:20px;">
      <el-button type="primary" @click="onSubmit">确定</el-button>
      <el-button @click="subCancel">取消</el-button>
    </div>-->
  </div>
</template>
<script>
import { categoryList } from '@/api/product'
import { boxRewardList, boxRewardTypeList } from '@/api/boxreward'

export default {
  props: {},
  data() {
    return {
      boxRewardData: [],
      tableData: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      loading: false,
      queryLoading: false,
      queryOptioins: [],
      classId: '',
      priceArr: [],
      form: {
        goods_data: []
      },
      query: {
        keywords: '',
        order_by: '',
        lowPrice: '',
        heightPrice: '',
        class_id: []
      }
    }
  },
  created() {
    this.getBoxRewardList()
    this.getBoxRewardTypeList()
  },
  methods: {
    //获取奖品列表
    getBoxRewardList() {
      this.loading = true
      const res = boxRewardList({
        page: this.currentPage,
        limit: this.pageSize,
        class_id: this.classId,
        price: this.priceArr,
        keywords: this.query.keywords,
        order_by: this.query.order_by
      }).then((res) => {
        this.loading = false
        console.log(res)
        this.total = res.count
        this.boxRewardData = res.data
      })
    },
    //获取奖品分类列表
    async getBoxRewardTypeList() {
      this.queryLoading = true
      const res = await categoryList({
        page: '1',
        limit: '999',
        keywords: ''
      })
      this.queryLoading = false
      console.log(res)
      this.queryOptioins = res.data
    },
    // 搜索列表
    queryAsk() {
      // 不可以一个有值一个没值
      if (!this.query.lowPrice && !this.query.heightPrice) {
        console.log(this.query)
        this.priceArr = []
        this.classId = this.query.class_id[this.query.class_id.length - 1]
        this.currentPage = 1
        this.getBoxRewardList()
      } else if (this.query.lowPrice && this.query.heightPrice) {
        this.priceArr = [this.query.lowPrice, this.query.heightPrice]
        console.log(this.query)
        this.classId = this.query.class_id[this.query.class_id.length - 1]
        this.currentPage = 1
        this.getBoxRewardList()
      } else if (!this.query.lowPrice || !this.query.heightPrice) {
        this.$message.error('请输入价格区间')
      }
    },
    queryReset() {
      this.resetForm('query')
      this.total = 0
      this.currentPage = 1
      this.pageSize = 10
      this.query.keywords = ''
      this.query.type = '0'
      this.query.lowPrice = ''
      this.query.heightPrice = ''
      this.query.order_by = ''
      this.query.class_id = '0'
      this.classId = '0'
      this.getBoxRewardList()
    },
    // 选择奖品
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },

    // handleSelectionChange(val) {
    //   console.log(val)
    //   this.selectArr = []
    //   //已经有的不添加
    //   const aIds = new Set(this.selectArr.map((item) => item.id))
    //   val.forEach((item) => {
    //     if (!aIds.has(item.id)) {
    //       this.selectArr.push(item)
    //     }
    //   })
    // },
    //分页改变
    async currentChange(current) {
      this.currentPage = current
      await this.getBoxRewardList()
      const select = []
      console.log(this.form.goods_data)
      if (this.form.goods_data) {
        this.form.goods_data.forEach((good) => {
          this.boxRewardData.forEach((item) => {
            if (good.goods_id == item.id) {
              select.push(item)
            }
          })
        })
      }
      this.toggleSelection(select)
    },
    onSubmit(row) {
      this.$emit('drawerClose', [row])
      // this.drawer = false
    },

    goLast(row) {
      row.sort = this.form.goods_data[this.form.goods_data.length - 1].sort
      let index = this.form.goods_data.indexOf(row)
      let item = this.form.goods_data.splice(index, 1)[0] // 从数组中移除该项并获得它
      this.form.goods_data.push(item) // 将该项插入到数组的末尾
      let j = this.form.goods_data.length - 1
      for (let i = 0; i < this.form.goods_data.length; i++) {
        this.form.goods_data[i].sort = j
        j--
      }
    },
    // 排序
    sortChange({ column, prop, order }) {
      if (order == 'descending') {
        this.query.order_by = prop + ',' + 'desc'
        this.getBoxRewardList()
      } else if (order == 'ascending') {
        this.query.order_by = prop + ',' + 'asc'
        this.getBoxRewardList()
      }
    },
    subCancel() {
      this.drawer = false
      this.$$emit('drawerClose', this.selectArr)
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style lang="scss" scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}
.search {
  display: flex;
  align-items: center;
}
::v-deep .el-drawer.rtl {
  width: 650px !important;
  overflow: auto;
  .el-form {
    display: flex;
    flex-wrap: wrap;
  }
}
::v-deep .el-textarea__inner {
  width: 360px !important;
}
::v-deep .el-drawer.rtl {
  padding-bottom: 20px;
  width: 800px !important;
  overflow: auto;
}
// 上传图片
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

